import React, {useState} from 'react'
import {storiesOf} from '@storybook/react'
import {action} from '@storybook/addon-actions'

import Input from './input'
const ControlInput = () => {
  const [value, setValue] = useState()
  return <Input value={value} defaultValue={value} onChange={(e) => {setValue(e.target.value)}} />
}

const defaultInput = () => (
  <>
    <Input
      style={{width: '300px'}}
      placeholder="default input"
      onChange={action('changed')}
    />
    <ControlInput />
  </>
)

const disabledInput = () => (
  <Input
    style={{width: '300px'}}
    placeholder="disabeld input"
    disabled
  />
)

const iconInput = () => (
  <Input
    style={{width: '300px'}}
    placeholder="icon input"
    icon="search"
  />
)

const sizeInput = () => (
  <>
    <Input
      style={{width: '300px'}}
      placeholder="large input"
      size="lg"
    />
    <Input
      style={{width: '300px'}}
      placeholder="small input"
      size="sm"
    />
  </>
)

const pandInput = () => (
  <>
    <Input
      style={{width: '300px'}}
      placeholder="prepend input"
      prepend="http://"
    />
    <Input
      style={{width: '300px'}}
      placeholder="append input"
      append=".com"
    />
  </>
)

storiesOf('Input Component', module)
  .add('默认input', defaultInput)
  .add('禁用input', disabledInput)
  .add('带图标input', iconInput)
  .add('不同尺寸input', sizeInput)
  .add('带前缀或后缀input', pandInput)